import React from 'react';
import fns from '../../store/asyncMethods';
import {connect,Provider} from 'react-redux';
import './Settlement.css';
import { Toast, WhiteSpace, WingBlank, Button } from 'antd-mobile';
// 使用redux
  // 将修改store到方法映射到props上，默认会传入store里到dispach里
  function mapDispatchToprops(dispatch) { 
    return {
      addSettlementData(data){
          dispatch({type:'addSettlementData',content:data});
      }
    }
 };
// 将state映射到props上
function mapStateToProps(state){
  return {
    SettlementData:state.SettlementData?state.SettlementData:0
  }
}; 
class SettlementCom1 extends React.Component{
    constructor(props){
        super(props);
        console.log('在SettlementCom页面的props=>',props)
    };
    goback=()=>{
        return this.props.history.push('/dati')
    }
    render(){
        let prefect = <img src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.51miz.com%2FElement%2F00%2F36%2F87%2F15%2Ff41ae038_E368715_f3f06412.png&refer=http%3A%2F%2Fimg.51miz.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626489915&t=94aec0b6286bec9b89670b29c1ae09e0' alt=''></img>;
        let again = <img src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.biaobaiju.com%2Fuploads%2F20181025%2F21%2F1540475474-utOlQKEixf.jpg&refer=http%3A%2F%2Fimage.biaobaiju.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626490151&t=e1f6a10d05634359b14e0fa50f505698' alt=''></img>;
        let fail = <img src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F17%2F03%2F10%2F78cec43c92114c7fe33f7a0c6dce6a46.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626489402&t=c174519cbfa896b3e539d50e649c5ddc' alt=''></img>;
        let tempRes=null;
        if(this.props.SettlementData.integral>=90){
            tempRes=prefect;
        }else if(this.props.SettlementData.integral>=70){
            tempRes=again;
        }else{
            tempRes=fail;
        };
        return (
            <div className='settlementWrap'>
               <header>
                 <span className='blackBtn' onClick={this.goback}>返回</span>
                 <h5 className='titleName'>答题结果</h5>
               </header>
               <div className='sumWrap'>
                   <div className='img_wrap'>
                    {tempRes}
                   </div>
                   <div className='sumText'>
                       <span className='wrongNum'>答错：{this.props.SettlementData.selectWrongNum?this.props.SettlementData.selectWrongNum:0}个</span>
                       <span className='rightNum'>答对：{this.props.SettlementData.selectRightNum?this.props.SettlementData.selectRightNum:0}个</span>
                       <span className='Score'>得分：<i>{this.props.SettlementData.integral?this.props.SettlementData.integral:0}</i></span>
                   </div>
               </div>
            </div>
        )
    }
}
const SettlementCom =connect(
    mapStateToProps,
    mapDispatchToprops
  )(SettlementCom1)
export default SettlementCom